<template>
	<view class="health">
		<view
			class="t_container"
			:style="{ paddingTop: globalData.paddingTop + 'px',height:globalData.navBarHeight+ 'px' }"
		>
			<view class="l_content" :style="{ height: globalData.lineHeight + 'px'}"> Hello，欢迎回来！ </view>
		</view>
		<view class="m_container">
			<view class="card celiang">
				<view class="header">
					<view class="l">测量记录</view>
					<view class="r">
						<view
							class="more"
							@click="navigateTo('/pagesA/health/analyse/index')"
						>
							更多
							<u-icon name="arrow-right" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="hint">碳水消耗比例</view>
				<view class="content">
					<view class="date-box">
						<view class="pre-p" @click="reduceTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
								size="23"
							></u-icon>
						</view>
						<view class="date-m" @click="showCalendar = true">
							<text>{{ currentSearchTime }}</text>
						</view>
						<view class="next-p" @click="plusTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
								size="23"
							></u-icon>
						</view>
					</view>
					<view class="tabs">
						<view
							@click="changeWeightTab3(index, item.type)"
							class="tab"
							:class="{ current: currentDayType == item.type }"
							v-for="(item, index) in tabs3"
							:key="index"
						>
							{{ item.text }}
						</view>
					</view>
					<view class="charts">
						<myCharts :option="todayMetabolismOption"></myCharts>
					</view>
				</view>
			</view>
			<view class="m-card" style="margin: 20rpx 0">
				<view class="c_tips">
					<view class="txt">
						<text>弹性代谢指数</text>
						<view class="u_time" v-if="scoreInfo.pageType == 2">
							更新日期：{{ scoreInfo.createTime }}
						</view>
					</view>
				</view>
				<view class="none" v-if="scoreInfo.pageType == 0">
					<view
						class="unlock-btn"
						@click="navigate('/pagesA/health/device/info/index')"
						><u-icon
							name="http://oss.antaimedical.com/images/pro/2025/02/67aea9b9e4b0be9d44423445RO21ZWKe6zBh955e3551737a38bf84b17124a4e484e6.png"
							size="15"
						></u-icon>
						立即测试</view
					>
					<view class="unlock-text"> 解锁您的弹性分数 </view>
					<view class="unlock-text2">
						在本周内完成
						<text class="unlock-text3">
							3 <text style="font-size: 26rpx">天</text>
						</text>
						日目标即可生成第一个弹性分数，加油！
					</view>
				</view>
				<view class="unlock" v-else-if="scoreInfo.pageType == 1">
					<view
						class="unlock-btn"
						@click="navigate('/pagesA/health/device/info/index')"
						><u-icon
							name="http://oss.antaimedical.com/images/pro/2025/02/67aea9b9e4b0be9d44423445RO21ZWKe6zBh955e3551737a38bf84b17124a4e484e6.png"
							size="15"
						></u-icon>
						立即测试</view
					>
					<view class="unlock-text"> 弹性分数未生成 </view>
					<view class="unlock-text2">
						在本周内完成
						<text class="unlock-text3">
							{{ scoreInfo.day }}
							<text style="font-size: 26rpx">天</text>
						</text>
						日目标即可生成第一个弹性分数，加油！
					</view>
					<view class="day">
						<view class="d_t"> 日目标 </view>
						<view class="tips">
							根据个人生活习惯完成清晨、早餐后、午餐后、晚餐后的测量。
						</view>

						<view class="options">
							<view
								class="option"
								v-for="(item, index) in goalStatus"
								:key="index"
							>
								<view
									class="o_status"
									:class="{ checked: item.status }"
								>
									<u-icon
										v-if="item.status"
										name="checkmark"
										color="#fff"
										size="28"
									></u-icon>
									<text v-else>-</text>
								</view>
								<view class="type">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view
					class="task"
					v-else-if="scoreInfo.pageType == 2"
					@click="navigate('/pagesA/health/grade/details')"
				>
					<view class="garage">
						<circularProgress
							bgColor="#eeeffc"
							:isBgShow="true"
							:lineWidth="14"
							boxWidth="160"
							boxHeight="160"
							progressColor="#D6DAFF"
							fontColor="#5677fc"
							gradualColor="#1F2434"
							:fontShow="false"
							:percent="(scoreInfo.mbScore / 15) * 100"
						>
							<view class="details">
								<view>
									{{ scoreInfo.mbScore.toFixed(2) }}
								</view>
								<view class="text1">弹性分数</view>
							</view>
						</circularProgress>
					</view>
					<view class="m_t">
						持续跟踪弹性分数，有助于了解您的健康弹性，加油！
					</view>
					<view class="weeks">
						<view class="d_t"> 本周概况 </view>
						<view class="status">
							<view
								class="s_i"
								v-for="item in taskStatus"
								:key="item.type"
							>
								<view
									class="s_dot"
									:style="{ backgroundColor: item.color }"
								></view>
								<view class="s_text">{{ item.text }}</view>
							</view>
						</view>
						<view class="w_box">
							<view
								class="week"
								v-for="item in weeks"
								:key="item.type"
							>
								<view
									class="w_dot"
									:style="{
										backgroundColor: item.color
											? item.color
											: '#fafafa',
										border: item.color
											? '0'
											: '2rpx solid #666666'
									}"
								>
								</view>
								<view class="w_text">
									{{ item.text }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card circular">
				<view class="header">
					<view class="l">饮食&运动&睡眠</view>
					<view class="r">
						<view
							class="more"
							style="margin-right: 20rpx"
							@click="handleToPage"
						>
							更多
							<u-icon name="arrow-right" size="15"></u-icon>
						</view>
						<view class="add" @click="handleToAddPage">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67aeee90e4b0be9d44423446Qmhwf6QL5jiud5ae02e7ef813049429a42cbb0979df7.png"
								size="15"
							></u-icon>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="tabs">
						<view
							@click="changeWeightTab2(index, item.type)"
							class="tab"
							:class="{ current: currentWIndex2 == index }"
							v-for="(item, index) in tabs2"
							:key="index"
						>
							{{ item.text }}
						</view>
					</view>
					<view class="circular-box">
						<view v-if="currentWIndex2 == 0">
							<view class="t-box">
								<view class="item">
									<view class="num">{{
										recommendObj.alreadyEnergyContent
									}}</view>
									<view class="item-text">饮食(千卡)</view>
								</view>
								<view
									class="item circularProgress"
									v-if="recommendObj.progressColor"
								>
									<circularProgress
										bgColor="#F3F4F7"
										:isBgShow="true"
										type="circular60"
										:lineWidth="10"
										boxWidth="140"
										boxHeight="140"
										:progressColor="
											recommendObj.progressColor
										"
										:fontShow="false"
										:percent="recommendObj.circularProgress"
									>
										<view class="details">
											<view class="item-text">{{
												recommendObj.circularProgressText
											}}</view>
											<view class="num">{{
												recommendObj.circularProgressNum
													| cardVal
											}}</view>
											<view class="item-text"
												>推荐摄入{{
													recommendObj.energyContent
														| cardVal
												}}</view
											>
										</view>
									</circularProgress>
								</view>
								<view class="item">
									<view class="num">{{
										sportExpend | cardVal
									}}</view>
									<view class="item-text">运动(千卡)</view>
								</view>
							</view>
							<view class="b-box">
								<view class="item">
									<view class="item-text">碳水</view>
									<view class="progress">
										<u-line-progress
											:percentage="
												(recommendObj.alreadyChoContent /
													recommendObj.choContent) *
												100
											"
											:showText="false"
											inactiveColor="#F3F4F7"
											:activeColor="
												progressFn2(
													recommendObj.alreadyChoContent,
													recommendObj.choContent
												).progressColor
											"
											height="7"
										></u-line-progress>
									</view>
									<view class="num">
										<text
											:style="{
												color: progressFn2(
													recommendObj.alreadyChoContent,
													recommendObj.choContent
												).progressColor
											}"
										>
											{{
												recommendObj.alreadyChoContent
													| cardVal
											}}
										</text>
										/{{
											recommendObj.choContent | cardVal
										}}克</view
									>
								</view>
								<view class="item">
									<view class="item-text">脂肪</view>
									<view class="progress">
										<u-line-progress
											:percentage="
												(recommendObj.alreadyFatContent /
													recommendObj.fatContent) *
												100
											"
											:showText="false"
											inactiveColor="#F3F4F7"
											:activeColor="
												progressFn2(
													recommendObj.alreadyFatContent,
													recommendObj.fatContent
												).progressColor
											"
											height="7"
										></u-line-progress>
									</view>
									<view class="num">
										<text
											:style="{
												color: progressFn2(
													recommendObj.alreadyFatContent,
													recommendObj.fatContent
												).progressColor
											}"
										>
											{{
												recommendObj.alreadyFatContent
													| cardVal
											}}
										</text>
										/{{
											recommendObj.fatContent | cardVal
										}}克</view
									>
								</view>
								<view class="item">
									<view class="item-text">氨基酸</view>
									<view class="progress">
										<u-line-progress
											:percentage="
												(recommendObj.alreadyProteinContent /
													recommendObj.proteinContent) *
												100
											"
											:showText="false"
											inactiveColor="#F3F4F7"
											:activeColor="
												progressFn2(
													recommendObj.alreadyProteinContent,
													recommendObj.proteinContent
												).progressColor
											"
											height="7"
										></u-line-progress>
									</view>
									<view class="num">
										<text
											:style="{
												color: progressFn2(
													recommendObj.alreadyProteinContent,
													recommendObj.proteinContent
												).progressColor
											}"
										>
											{{
												recommendObj.alreadyProteinContent
													| cardVal
											}}
										</text>
										/{{
											recommendObj.proteinContent
												| cardVal
										}}克
									</view>
								</view>
							</view>
						</view>
						<view v-if="currentWIndex2 == 1">
							<view class="ydCharts">
								<myCharts :option="sportOption"></myCharts>
							</view>
							<view class="kj-box">
								<view class="kj-item">
									<view class="text">有氧消耗(KJ)</view>
									<view class="num" style="color: #02a7f0">{{
										sportData.aerobiacsComsume || '--'
									}}</view>
								</view>
								<view class="kj-item">
									<view class="text">无氧消耗(KJ)</view>
									<view class="num" style="color: #1f2434">{{
										sportData.anaerobicComsume || '--'
									}}</view>
								</view>
								<view class="kj-item">
									<view class="text">运动消耗(KJ)</view>
									<view class="num" style="color: #23c89e">{{
										sportData.kcal || '--'
									}}</view>
								</view>

								<view class="kj-item">
									<view class="text">心率(次/min)</view>
									<view class="num" style="color: #ff672b">{{
										sportData.currentHeartRateAvg || '--'
									}}</view>
								</view>
							</view>
						</view>
						<view v-if="currentWIndex2 == 2" class="sleep-box">
							<view class="ydCharts">
								<myCharts :formatterFn="formatterFn" :option="sleepOption"></myCharts>
							</view>
							<view class="tips" v-if="sleepData.durationType">
								<u-image
									width="120rpx"
									height="120rpx"
									:showMenuByLongpress="false"
									:src="
										durationTypeImg[sleepData.durationType]
									"
									:lazy-load="true"
								></u-image>
								<text class="text1">昨天睡眠时长</text
								><text class="text">{{
									sleepData.duration
								}}</text>
								<!-- <text class="text2">H</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card daixie">
				<view class="header">
					<view class="l">代谢水平详情</view>
					<view class="r">
						<view
							class="more"
							@click="
								navigateTo('/pagesA/health/analyse/metabolism')
							"
						>
							更多
							<u-icon name="arrow-right" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="hint">{{ tipsData.gradeExplain || ' ' }}</view>
				<view class="content">
					<view class="charts">
						<myCharts
							:option="pieOption"
							@chartClick="chartClick"
						></myCharts>
					</view>
					<view class="charts-text">
						<view class="text-item"
							>次数:<text>{{ piePicData.count || 0 }}</text></view
						>
						<view class="text-item"
							>达标次数:<text>{{
								piePicData.reachCount || 0
							}}</text></view
						>
						<view class="text-item"
							>频率:<text>{{ frequency || 0 }}%</text></view
						>
						<view class="text-item"
							>达标频率:<text
								>{{ piePicData.reachFrequency || 0 }}%</text
							></view
						>
					</view>
				</view>
			</view>

			<view class="w-card">
				<view class="title">
					<text class="t-l">您的体重</text>
					<view class="add" @click="showModal = true">
						<u-icon
							name="http://oss.antaimedical.com/images/pro/2025/02/67aeee90e4b0be9d44423446Qmhwf6QL5jiud5ae02e7ef813049429a42cbb0979df7.png"
							size="15"
						></u-icon>
					</view>
				</view>
				<view class="date-box">
					<view class="pre-p" @click="reduceTap2">
						<u-icon
							name="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
							size="23"
						></u-icon>
					</view>
					<view class="date-m" @click="showCalendar2 = true">
						<text>{{ currentSearchTime2 }}</text>
					</view>
					<view class="next-p" @click="plusTap2">
						<u-icon
							name="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
							size="23"
						></u-icon>
					</view>
				</view>
				<view class="tabs">
					<view
						@click="changeWeightTab(index, item.type)"
						class="tab"
						:class="{ current: currentWIndex == index }"
						v-for="(item, index) in tabs3"
						:key="index"
					>
						{{ item.text }}
					</view>
				</view>
				<view class="charts_w">
					<myCharts
						:option="WeightOption"
						@chartClick="handleClickWeightChart"
					></myCharts>
				</view>
				<view v-if="showInfo" style="margin-top: 48rpx">
					<view class="showModal-page">
						<view class="s_l">
							<view class="time">
								{{ detailTime }}
							</view>
							<view class="showModal-line"></view>
							<view class="info_data">
								<text style="color: #545dde">{{
									detailData
								}}</text>
								<text>公斤</text>
							</view>
						</view>
						<view class="h_b" @click="showDelete = true">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal
			:show="showDelete"
			@close="showDelete = false"
			@cancel="showDelete = false"
			@confirm="$u.throttle(deleteRecord, 2500)"
			title="删除记录"
			confirmText="确认"
			cancelText="取消"
			showCancelButton
			cancelColor="#000000"
			confirmColor="#545DDE"
		>
			<view class="del_tips"> 确认删除该记录? </view>
		</u-modal>
		<custom-modal
			:showModal="showModal"
			@close="showModal = false"
			type="weight"
			@sendWeight="setWeight"
			:weight="userInfo.weight"
		></custom-modal>
		<my-calendar
			:monthNum="24"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate"
			:minDate="minDate"
			:show="showCalendar"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar = false"
		></my-calendar>
		<my-calendar
			:monthNum="24"
			:defaultDate="defaultDate2"
			:maxDate="maxDate2"
			@confirm="selectDate2"
			:minDate="minDate2"
			:show="showCalendar2"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar2 = false"
		></my-calendar>
		<drag-button :isDock="true" :existTabBar="true" />
		<tab-bar :current="3"></tab-bar>
	</view>
</template>

<script>
import dragButton from '@/components/drag-button/drag-button.vue'
import myCharts from '@/components/charts/myCharts.vue'
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import ljsPagination from '@/components/ljs-pagination/ljs-pagination.vue'
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import customModal from '@/components/custom-modal/index.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
import { getWeekDate } from '@/utils/utils.js'
import { mapState, mapGetters } from 'vuex'
import {
	getWeightRecord,
	delWeightLog,
	addWeightLog,
	findMetabolicFlexScore,
	findPiePic,
	findCh0RateRecord30,
	findNewestRerLevel,
	findSportExpend,
	findDietaryRecommend,
	findSportHistogramDay,
	findSleepDayRecordByDay30,
	findMetabolismGradeExplain,
	getDetailsByUser
} from '@/api/index.js'
const dayjs = require('@/utils/dayjs.min.js')
let app = getApp()
export default {
	components: {
		myCharts,
		myCalendar,
		ljsPagination,
		uniEcCanvas,
		dragButton,
		customModal
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			globalData: app.globalData,
			imgUrl: this.$imgUrl,
			userId: uni.getStorageSync('userId'),
			sleepOption: {
				showChart: true,
				grid: {
					left: 0,
					right: 0,
					bottom: 0,
					top: '70',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					// showContent: false,
					backgroundColor: '#1F2434',
					showDelay: 0,
					textStyle: {
						color: '#fff',
						fontSize: '14'
					},
					padding: [3, 10],
					formatter: `{b}\n{c}`,
					formatterFn: true,
					position: ['50%', '0%']
				},
				xAxis: {
					type: 'category',
					axisLine: {
						//X轴刻度线样式
						show: true,
						lineStyle: {
							color: '#E6EBF5',
							width: 1
						}
					},

					axisTick: {
						show: false
					},
					axisLabel: {
						//X轴刻度线字体样式
						fontSize: 12,
						color: '#999999'
					},
					data: ['休息时间', '起床时间']
				},
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: false,
							lineStyle: {
								width: 1,
								color: '#E6EBF5',
								type: 'dashed'
							}
						},
						axisLine: {
							//Y轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},
						min: 0, // Y轴刻度
						max: 24, // Y轴刻度
						interval: 12, // Y轴刻度
						axisLabel: {
							//Y轴刻度线字体样式
							margin: 4,
							formatter: '{value}:00',
							fontSize: 12,
							color: '#999999'
						},
						verticalAlign: 'middle'
					}
				],
				series: [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(190,239,227,0.8)'
									},
									{
										offset: 0.85,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},
						smooth: true
					}
				]
			},
			sleepData: {},
			durationTypeImg: {
				0: 'http://oss.antaimedical.com/images/pro/2025/02/67bd9a2ee4b0d615350f3144TY0ghjS02ssf4a245517860a6d5acd52edb273693936.png',
				1: 'http://oss.antaimedical.com/images/pro/2025/02/67b7f425e4b0d615350f313fGOukQR5JECwYc5ea009232e8b4dab816ea0a557f11c3.png',
				2: 'http://oss.antaimedical.com/images/pro/2025/02/67bd9a1fe4b0d615350f3143qV6c9GiS8s7P50f947f6515962d725935906778f86d4.png'
			},
			todayMetabolismOption: {},
			metabolismScoreRecordOption: {},
			weightOption: {},
			scoreInfo: { pageType: 0 }, // 代谢弹性分数详情数据
			goalStatus: [],
			defaultDate: [],
			maxDate: '',
			minDate: '',
			currentSearchTime: '',
			weeks: [
				{
					type: -1,
					text: '一',
					color: ''
				},
				{
					type: -1,
					text: '二',
					color: ''
				},
				{
					type: -1,
					text: '三',
					color: ''
				},
				{
					type: -1,
					text: '四',
					color: ''
				},
				{
					type: -1,
					text: '五',
					color: ''
				},
				{
					type: -1,
					text: '六',
					color: ''
				},
				{
					type: -1,
					text: '日',
					color: ''
				}
			],
			tabs2: [
				{
					type: 1,
					text: '饮食'
				},
				{
					type: 2,
					text: '运动'
				},
				{
					type: 3,
					text: '睡眠'
				}
			],
			tabs3: [
				{
					type: '1',
					text: '日'
				},
				{
					type: '2',
					text: '周'
				},
				{
					type: '3',
					text: '月'
				}
			],
			showCalendar: false,
			currentWIndex2: 0,
			taskStatus: [
				{
					text: '当天',
					color: '#545DDE'
				},
				{
					text: '已达成',
					color: '#7CD37E'
				},
				{
					text: '未达成',
					color: '#CCCCCC'
				}
			],
			// 体重 start
			currentWIndex: 1,
			currentType: 2,
			currentDayType: 1,
			detailData: null,
			detailTime: null,
			showModal: false, // 体重弹窗
			showInfo: false, // 体重点击详情
			showDelete: false, // 体重删除弹框

			WeightOption: {},
			defaultDate2: [],
			maxDate2: '',
			minDate2: '',
			currentSearchTime2: '',
			showCalendar2: false,
			// 体重 end
			chartType: '--',
			piePicData: {},
			tipsData: '',
			pieOption: {
				showChart: true,
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['25%', '90%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'inside',
							color: '#1F2434'
						},
						labelLine: {
							show: false
						},
						data: []
					}
				]
			},
			sportOption: {
				showChart: true,
				tooltip: {
					trigger: 'axis',
					// showContent: false,
					backgroundColor: '#1F2434',
					showDelay: 0,
					textStyle: {
						color: '#fff',
						fontSize: '14'
					},
					padding: [3, 10],
					formatter: `{b}\n{c}`,
					position: ['50%', '0%']
				},
				grid: {
					left: 0,
					right: 0,
					bottom: 0,
					top: '70',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['有氧运动', '无氧运动', '运动消耗'],
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: false,
							lineStyle: {
								width: 1,
								color: '#E6EBF5',
								type: 'dashed'
							}
						},
						axisLine: {
							//Y轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},
						min: 0, // Y轴刻度
						max: 1000, // Y轴刻度
						interval: 500, // Y轴刻度
						axisLabel: {
							//Y轴刻度线字体样式
							margin: 4,
							formatter: '{value}KJ',
							fontSize: 12,
							color: '#999999'
						},
						verticalAlign: 'middle'
					}
				],
				series: [
					{
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' ml'
							}
						},
						barWidth: '10',
						barGap: '0',
						itemStyle: {
							color: function (params) {
								// 使用函数动态设置颜色
								let colorList = [
									'#23C89E',
									'#02A7F0',
									'#1F2434'
								]
								return colorList[params.dataIndex]
							}
						},
						data: []
					},
					{
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' ml'
							}
						},
						barWidth: '10',
						barGap: '0',
						itemStyle: {
							color: '#C7C8CC'
						},
						data: []
					}
				]
			},
			colorList: [
				'rgba(31, 36, 52, .1)',
				'rgba(31, 36, 52, .1)',
				'rgba(31, 36, 52, .13)',
				'rgba(31, 36, 52, .16)',
				'rgba(31, 36, 52, .19)',
				'rgba(31, 36, 52, .22)'
			],
			frequency: '',
			recommendObj: {},
			sportData: {},
			rerLevel: 0,
			sportExpend: 0
		}
	},
	computed: {
		...mapState({
			ble: (state) => state.ble // 实时蓝牙全局状态
		}),
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	filters: {
		cardVal(val) {
			return val ? val : '0'
		}
	},
	watch: {
		'userInfo.userId': {
			handler(newVal, oldVal) {
				this.userId = newVal
			}
		}
	},
	onPullDownRefresh() {},
	onReady() {
		// this.option = this.getOption()
	},
	async onShow() {
		await this.getInfoByUser()
		this.fetchWeightData(2)
		this.findPiePic()
		this.findCh0RateRecord30()
		this.findSportHistogramDay()
		this.getFindDietaryRecommend()
		this.findSleepDayRecordByDay30()
	},
	async onLoad() {
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime = dayjs().format('YYYY/MM/DD')
		this.defaultDate[0] = this.maxDate

		this.maxDate2 = dayjs().format('YYYY-MM-DD')
		this.minDate2 = dayjs(dayjs(this.maxDate2).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime2 = dayjs().format('YYYY/MM/DD')
		this.defaultDate2[0] = this.maxDate2
		// this.handleGetWeightRecord()
	},

	methods: {
		fetchData() {
			this.findCh0RateRecord30()
		},
		// 饮食运动睡眠，更多跳转
		handleToPage() {
			if (this.currentWIndex2 == 0) {
				this.navigateTo('/pagesA/health/diet/index')
			} else if (this.currentWIndex2 == 1) {
				this.navigateTo('/pagesA/health/campaign/index')
			} else if (this.currentWIndex2 == 2) {
				this.navigateTo('/pagesA/health/sleep/sleepDetail')
			}
		},
		// 饮食运动睡眠，添加跳转
		handleToAddPage() {
			if (this.currentWIndex2 == 0) {
				this.navigateTo('/pagesA/health/diet/index')
			} else if (this.currentWIndex2 == 1) {
				this.navigateTo('/pagesA/health/device/info/campaign/add')
			} else if (this.currentWIndex2 == 2) {
				this.navigateTo('/pagesA/health/sleep/sleepIndex')
			}
		},
		// 获取提示语
		findMetabolismGradeExplain(rerLevel) {
			let params = {
				rerLevel,
				tag: '1'
			}
			findMetabolismGradeExplain(params).then((res) => {
				this.tipsData = res.data
			})
		},
		// 点击饼图
		chartClick(params) {
			if (!params.name) return
			let optionData = []
			for (
				let index = 0;
				index < this.piePicData.pieArr.length;
				index++
			) {
				let pieItem = this.piePicData.pieArr[index]
				let obj = {}
				if (params.name == '等级' + pieItem.rerLevel) {
					this.frequency = pieItem.frequency
					obj = {
						value: pieItem.count,
						name: '等级' + pieItem.rerLevel,
						rerLevel: pieItem.rerLevel,
						itemStyle: {
							color: '#23C89E'
						}
					}
				} else {
					obj = {
						value: pieItem.count,
						name: '等级' + pieItem.rerLevel,
						rerLevel: pieItem.rerLevel,
						itemStyle: {
							color: this.colorList[pieItem.rerLevel]
						}
					}
				}
				optionData.push(obj)
			}
			this.pieOption.graphic = {
				show: false,
				elements: [
					{
						type: 'circle', // 创建一个圆形
						left: 'center', // 定位到中心
						top: 'center',
						z: '10',
						shape: {
							cx: 0, // 圆心x坐标（相对于容器）
							cy: 0, // 圆心y坐标（相对于容器）
							r: 37 // 半径，根据你的内圆大小调整
						},
						style: {
							fill: '#FFF', // 填充颜色设为透明，以便看到下面的饼图
							stroke: 'rgba(255,255,255,.1)', // 描边颜色，即阴影颜色
							lineWidth: 5, // 描边宽度，即阴影的模糊程度
							shadowBlur: 20, // 阴影的模糊大小
							shadowColor: 'rgba(0,0,0,.2)' // 阴影颜
						}
					},
					{
						type: 'text',
						left: 'center',
						top: '55%',
						z: '11',
						style: {
							text: '理想等级',
							textAlign: 'center',
							fill: '#92949c',
							fontSize: 12,
							fontWeight: 400
						}
					},
					{
						type: 'text',
						left: 'center',
						top: '45%',
						z: '11',
						style: {
							text: `${this.piePicData.idealRer}`,
							textAlign: 'center',
							fill: '#1F2434',
							fontSize: 15,
							fontWeight: 500
						}
					}
				]
			}
			this.pieOption.series[0].data = optionData
			this.findMetabolismGradeExplain(params.data.rerLevel)
		},
		// 饼图数据
		findPiePic() {
			let params = {
				dateTime: dayjs().format('YYYY/MM/DD'),
				dateType: 'M',
				tag: '1',
				userId: this.userId
			}
			findPiePic(params).then((res) => {
				this.piePicData = res.data
				let optionData = []
				let pieArr = []
				for (let index = 0; index < 5; index++) {
					let i = index + 1
					if (this.piePicData['rerLevel' + i]) {
						pieArr.push(this.piePicData['rerLevel' + i])
					}
				}
				this.piePicData.pieArr = pieArr
				if (!res.data.rerMaxKey) {
					this.pieOption.showChart = true
				} else {
					for (
						let index = 0;
						index < this.piePicData.pieArr.length;
						index++
					) {
						let pieItem = this.piePicData.pieArr[index]
						let obj = {}
						if (
							this.piePicData.rerMaxKey ==
							'rerLevel' + pieItem.rerLevel
						) {
							this.frequency = pieItem.frequency
							obj = {
								value: pieItem.count,
								name: '等级' + pieItem.rerLevel,
								rerLevel: pieItem.rerLevel,
								itemStyle: {
									color: '#23C89E'
								}
							}
							this.findMetabolismGradeExplain(pieItem.rerLevel)
						} else {
							obj = {
								value: pieItem.count,
								name: '等级' + pieItem.rerLevel,
								rerLevel: pieItem.rerLevel,
								itemStyle: {
									color: this.colorList[pieItem.rerLevel]
								}
							}
						}
						optionData.push(obj)
					}
					this.pieOption.graphic = {
						show: false,
						elements: [
							{
								type: 'circle', // 创建一个圆形
								left: 'center', // 定位到中心
								top: 'center',
								z: '10',
								shape: {
									cx: 0, // 圆心x坐标（相对于容器）
									cy: 0, // 圆心y坐标（相对于容器）
									r: 37 // 半径，根据你的内圆大小调整
								},
								style: {
									fill: '#FFF', // 填充颜色设为透明，以便看到下面的饼图
									stroke: 'rgba(255,255,255,.1)', // 描边颜色，即阴影颜色
									lineWidth: 5, // 描边宽度，即阴影的模糊程度
									shadowBlur: 20, // 阴影的模糊大小
									shadowColor: 'rgba(0,0,0,.2)' // 阴影颜
								}
							},
							{
								type: 'text', //使用graphic来调节标题的样式以及位置
								left: 'center',
								top: '55%',
								z: '11',
								style: {
									text: '理想等级',
									textAlign: 'center',
									fill: '#92949c',
									fontSize: 12,
									fontWeight: 400
								}
							},
							{
								type: 'text', //使用graphic来调节标题的样式以及位置
								left: 'center',
								top: '45%',
								z: '11',
								style: {
									text: `${this.piePicData.idealRer}`,
									textAlign: 'center',
									fill: '#1F2434',
									fontSize: 15,
									fontWeight: 500
								}
							}
						]
					}
					this.pieOption.series[0].data = optionData
					this.pieOption.showChart = false
				}
			})
		},
		findCh0RateRecord30() {
			let obj = {
				1: 'D', //日
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				dateType: obj[this.currentDayType] || 'D',
				dateTime: this.defaultDate[0],
				userId: this.userId
			}
			findCh0RateRecord30(params).then((res) => {
				// this.chartsRecordList = res.data
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					dataZoom:
						this.currentDayType == 3
							? {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									start: 1,
									end: 50,
									maxValueSpan: 3600 * 24 * 1000 * 30,
									zoomLock: true
							  }
							: {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									start: 1,
									end: 100,
									maxValueSpan: 3600 * 24 * 1000 * 7,
									zoomLock: true
							  },
					tooltip: {
						trigger: 'axis',
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
						padding: [3, 10],
						formatter: `{b}\n{c}%`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: []
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 100, // Y轴刻度
							interval: 50, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}%',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(190,239,227,0.8)'
									},
									{
										offset: 0.85,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: Math.round((val.ch0Rate || 0) * 100),
						rerData: {
							tag: val.tag,
							label: val.label
						},
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					if (this.currentDayType == 1) {
						return dayjs(val.measureTime).format('HH:mm')
					} else {
						return dayjs(val.measureTime).format('MM/DD')
					}
				})
				if (!res.data.length) {
					if (this.currentDayType == 1) {
						option.xAxis.data = ['00:00', '23:59']
					} else {
						let dayArr = []
						for (let index = 0; index < 7; index++) {
							let day = dayjs(this.defaultDate[0])
								.subtract(7 - index, 'day')
								.format('MM/DD')
							dayArr.push(day)
						}
						option.xAxis.data = dayArr
					}
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				this.todayMetabolismOption = option
			})
		},
		// 营养推荐统计
		async getFindDietaryRecommend() {
			let params = {
				time: dayjs().format('YYYY-MM-DD'),
				bodyId: this.userInfo.bodyId,
				userId: this.userInfo.userId
			}
			findNewestRerLevel(params).then((res) => {
				this.rerLevel = res.data || 0
			})
			findSportExpend(params).then((res) => {
				this.sportExpend = res.data || 0
			})
			this.recommendObj.progressColor = ''
			await findDietaryRecommend(params).then((res) => {
				this.recommendObj = res.data
				this.recommendObj.energyContent =
					this.recommendObj.energyContent.toFixed()
				let num =
					(this.recommendObj.alreadyEnergyContent /
						this.recommendObj.energyContent) *
					100
				if (
					this.recommendObj.alreadyEnergyContent >=
					this.recommendObj.energyContent
				) {
					this.recommendObj.circularProgressText = '摄入超标'
					this.recommendObj.circularProgressNum = (
						this.recommendObj.alreadyEnergyContent -
						this.recommendObj.energyContent
					).toFixed()
					this.recommendObj.progressColor = '#F46666'
					this.recommendObj.circularProgressColor = '#F46666'
				} else if (
					this.recommendObj.alreadyEnergyContent <
					this.recommendObj.energyContent
				) {
					this.recommendObj.circularProgressNum = (
						this.recommendObj.energyContent -
						this.recommendObj.alreadyEnergyContent
					).toFixed()
					this.recommendObj.circularProgressText = '还可摄入'
					this.recommendObj.circularProgressColor = '#23C89E'
					this.recommendObj.progressColor = '#23C89E'
				} else {
					this.recommendObj.circularProgressText = '未检测'
					this.recommendObj.circularProgressColor = '#23C89E'
					this.recommendObj.progressColor = '#23C89E'
				}
				if (num < 1) {
					this.recommendObj.circularProgress = 0
				} else if (num > 100) {
					this.recommendObj.circularProgress = 100
				} else {
					this.recommendObj.circularProgress = num
				}
			})
		},
		//运动展示
		findSportHistogramDay() {
			let params = {
				dateTime: dayjs().format('YYYY-MM-DD'),
				dateType: 'D',
				userId: this.userId
			}
			findSportHistogramDay(params)
				.then((res) => {
					const {
						aerobiacsComsume,
						anaerobicComsume,
						kcal,
						recommendKcal,
						recommendAerobiacsComsume,
						recommendAnaerobicComsume
					} = res.data
					this.sportData = res.data
					let data1 = [aerobiacsComsume, anaerobicComsume, kcal]
					let data2 = [
						recommendAerobiacsComsume,
						recommendAnaerobicComsume,
						recommendKcal
					]
					if (res.data.currentHeartRateAvg) {
						this.sportOption.showChart = false
						this.sportOption.series[0].data = data1
						this.sportOption.series[1].data = data2
					}
				})
				.catch((err) => {})
		},
		//睡眠展示
		findSleepDayRecordByDay30() {
			let params = {
				time: dayjs().format('YYYY-MM-DD'),
				userId: this.userId
			}
			findSleepDayRecordByDay30(params)
				.then((res) => {
					this.sleepData = res.data
					const { startTime, endTime } = res.data
					let arr = [
                    {
							value: dayjs(startTime).format('HH'),
							time: dayjs(startTime).format('HH:mm'),
							itemStyle: {
								color: '#23C89E',
								borderWidth: '0'
							}
						},
						{
							value: dayjs(endTime).format('HH'),
							time: dayjs(endTime).format('HH:mm'),
							itemStyle: {
								color: '#23C89E',
								borderWidth: '0'
							}
						}
					]
					if (res.data) {
						this.sleepOption.series[0].data = arr
						this.sleepOption.showChart = false
					} else {
						this.sleepOption.showChart = true
					}
				})
				.catch((err) => {})
		},
        // tooltip 提示格式化函数
        formatterFn(params, ticket, callback){
			return `${params[0].name}\n${params[0].data.time}`;
        },
		// 选择日期
		selectDate(e) {
			console.log(e)
			this.defaultDate[0] = e[0]
			if (this.currentDayType == '1') {
				// 单个日期
				this.currentSearchTime = e[0].replaceAll('-', '/')
			} else if (this.currentDayType == '2') {
				this.currentSearchTime = getWeekDate(e[0])
			} else if (this.currentDayType == '3') {
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchData()
			this.showCalendar = false
		},
		// 上一个选项
		reduceTap() {
			this.showNumDetails = false
			let min = dayjs(this.minDate).format('YYYY/MM/DD')
			if (this.currentDayType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime = pre
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentDayType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = getWeekDate(pre)
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentDayType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		plusTap() {
			this.showNumDetails = false
			let max = dayjs(this.maxDate).format('YYYY/MM/DD')
			if (this.currentDayType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime = next
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentDayType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = getWeekDate(next)
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentDayType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 获取用户详情信息
		async getInfoByUser() {
			let params = {
				userId: this.userId,
				urlencoded: true
			}
			try {
				const res = await getDetailsByUser(params)
				if (res.code == 200 && res.data) {
					this.$store.commit('setUserInfo', res.data)
					await this.ferchMetabolicFlexScore()
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 获取代谢分数数据
		async ferchMetabolicFlexScore() {
			let params = {
				userId: this.userId,
				bodyId: this.userInfo.id || this.userInfo.bodyId
			}
			try {
				const res = await findMetabolicFlexScore(params)
				if (res.code == 200) {
					this.scoreInfo = res.data
					this.goalStatus = [
						{
							name: '清晨',
							status: this.scoreInfo.tagLableOne
						},
						{
							name: '餐后',
							status: this.scoreInfo.afterMeal
						}
					]

					this.weeks[0].type = res.data.week1
					this.weeks[1].type = res.data.week2
					this.weeks[2].type = res.data.week3
					this.weeks[3].type = res.data.week4
					this.weeks[4].type = res.data.week5
					this.weeks[5].type = res.data.week6
					this.weeks[6].type = res.data.week7
					this.weeks.forEach((item) => {
						item.color = this.getWeekColor(item.type)
					})
					if (this.scoreInfo.popFlag == 0) {
						uni.navigateTo({
							url: `/pagesA/health/grade/update?info=${JSON.stringify(
								this.scoreInfo
							)}`
						})
					}
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		getWeekColor(type) {
			if (type === 0) {
				return '#CCCCCC'
			} else if (type === 1) {
				return '#7CD37E'
			} else if (type === 2) {
				return '#545DDE'
			} else {
				return ''
			}
		},
		// 体重模块 start
		changeWeightTab(index, type) {
			this.currentWIndex = index
			this.currentType = type
			if (type == '1') {
				this.currentSearchTime2 = dayjs(this.maxDate2).format(
					'YYYY/MM/DD'
				)
			} else if (type == '2') {
				this.currentSearchTime2 = getWeekDate(this.maxDate2)
				this.defaultDate2[0] = this.maxDate2
			} else if (type == '3') {
				this.currentSearchTime2 = dayjs().format('YYYY/MM')
				this.defaultDate2[0] = this.maxDate2
			}
			this.fetchWeightData()
		},
		changeWeightTab2(index, type) {
			this.currentWIndex2 = index
		},
		changeWeightTab3(index, type) {
			if (type == '1') {
				this.currentSearchTime = dayjs(this.maxDate).format(
					'YYYY/MM/DD'
				)
			} else if (type == '2') {
				this.currentSearchTime = getWeekDate(this.maxDate)
				this.defaultDate[0] = this.maxDate
			} else if (type == '3') {
				this.currentSearchTime = dayjs().format('YYYY/MM')
				this.defaultDate[0] = this.maxDate
			}
			this.currentDayType = type
			this.findCh0RateRecord30()
		},
		// 删除体重记录
		async deleteRecord() {
			let time = this.detailTime.replace(/年|月/g, '-').replace(/日/g, '')
			try {
				let params = {
					time,
					userId: this.userId
				}
				const res = await delWeightLog(params)
				if (res.code == 200) {
					this.showInfo = false
					this.showDelete = false
					this.fetchWeightData(this.currentType)
					uni.showToast({
						title: '删除成功'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 添加体重记录
		async setWeight(val) {
			try {
				let params = {
					userId: this.userId,
					weight: val
				}
				const res = await addWeightLog(params)
				if (res.code == 200) {
					this.showModal = false
					this.showInfo = false
					this.fetchWeightData(this.currentType)
					uni.showToast({
						title: '添加成功'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		//  获体重记录数据
		async fetchWeightData() {
			let obj = {
				1: 'D',
				2: 'W',
				3: 'M'
			}
			this.showInfo = false
			let params = {
				userId: this.userId,
				type: obj[this.currentType],
				time: `${dayjs(this.defaultDate2[0]).format(
					'YYYY-MM-DD'
				)} 23:59:59`
			}
			const res = await getWeightRecord(params)
			if (res.code == 200) {
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					dataZoom:
						this.currentType == 3
							? {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									start: 1,
									end: 50,
									maxValueSpan: 3600 * 24 * 1000 * 30,
									zoomLock: true
							  }
							: {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									maxValueSpan: 3600 * 24 * 1000 * 7,
									zoomLock: true
							  },
					tooltip: {
						trigger: 'axis',
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
						padding: [3, 10],
						formatter: `{b}\n{c}KG`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: []
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 100, // Y轴刻度
							interval: 50, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}KG',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#23C89E'
									},
									{
										offset: 1,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: val.weight | 0,
						paramsData: {
							time: val.time,
							createTime: val.createTime
						},
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					if (this.currentType == 1) {
						return (
							(val.createTime &&
								dayjs(val.createTime).format('HH:mm')) ||
							dayjs(val.time).format('MM/DD')
						)
					} else {
						return dayjs(val.time).format('MM/DD')
					}
				})
				if (!res.data.length) {
					if (this.currentType == 1) {
						option.xAxis.data = ['00:00', '23:59']
					} else {
						let dayArr = []
						for (let index = 0; index < 7; index++) {
							let day = dayjs(this.defaultDate[0])
								.subtract(7 - index, 'day')
								.format('MM/DD')
							dayArr.push(day)
						}
						option.xAxis.data = dayArr
					}
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				let maxVal = option.series[0].data.find((val) => {
					return val.value > 100
				})
				if (maxVal) {
					option.yAxis[0].max = null
				}
				this.WeightOption = option
			}
		},
		handleClickWeightChart(params) {
			if (params.data.value) {
				this.detailTime = dayjs(
					params.data.paramsData.createTime
				).format('YYYY年MM月DD日')
				this.detailData = params.data.value
				this.showInfo = true
			}
		},
		// 选择日期
		selectDate2(e) {
			this.defaultDate2[0] = e[0]
			if (this.currentType == '1') {
				// 单个日期
				this.currentSearchTime2 = e[0].replaceAll('-', '/')
			} else if (this.currentType == '2') {
				this.currentSearchTime2 = getWeekDate(e[0])
			} else if (this.currentType == '3') {
				this.currentSearchTime2 = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchWeightData()
			this.showCalendar2 = false
		},
		// 上一个选项
		reduceTap2() {
			let min = dayjs(this.minDate2).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate2[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime2 = pre
					this.defaultDate2[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate2[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime2 = getWeekDate(pre)
					this.defaultDate2[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate2[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime2 = dayjs(pre).format('YYYY/MM')
					this.defaultDate2[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		plusTap2() {
			let max = dayjs(this.maxDate2).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate2[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime2 = next
					this.defaultDate2[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate2[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime2 = getWeekDate(next)
					this.defaultDate2[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate2[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime2 = dayjs(next).format('YYYY/MM')
					this.defaultDate2[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchWeightData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		progressFn2(type1, type2) {
			let num = type1
			let maxnum = type2
			let num1 = (num / maxnum) * 100
			let obj = {
				circularProgress: 0,
				progressColor: '#23C89E'
			}
			if (num1 < 1) {
				obj.circularProgress = 0
				obj.progressColor = '#23C89E'
			} else if (num1 > 100) {
				obj.circularProgress = 100
				obj.progressColor = '#F46666'
			} else {
				obj.circularProgress = num1
				obj.progressColor = '#23C89E'
			}
			return obj
		},
		// 体重模块 end
		navigate(url) {
			uni.navigateTo({
				url
			})
		},
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.t_container {
	width: 100%;
	background: #1f2434;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	.l_content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #ffffff;
        display: flex;
        align-items: center;
        padding-left: 38rpx;
		text-align: left;
	}
}

.m_container {
	margin-top: 176rpx;
	padding: 20rpx;
	padding-bottom: 64rpx;
	background-color: #f3f4f7;
	.card {
		width: 100%;
		padding: 32rpx;
		margin-bottom: 20rpx;
		background: linear-gradient(180deg, #f0fbfe 0%, #fff 40%);
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333333;
		.hint {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: rgba(31, 36, 52, 0.35);
			text-align: left;
			margin-top: 8rpx;
		}
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1f2434;
				line-height: 48rpx;
				text-align: left;
			}
			.r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 48rpx;
				text-align: right;
				display: flex;
				align-items: center;
				.more {
					display: flex;
					align-items: center;
				}
			}
		}
		.content {
			width: 100%;
		}
	}
	.tabs {
		width: 574rpx;
		height: 66rpx;
		margin: 24rpx auto 0;
		display: flex;
		align-items: center;
		background: #f3f4f7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.tab {
			width: 33.3%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(31, 36, 52, 0.5);
			line-height: 38rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-right: 2rpx solid #d0d0d0;
			&:last-child {
				border-right: 0;
			}
		}
		.current {
			font-weight: 600;
			font-size: 26rpx;
			color: #1f2434;
		}
	}
	.date-box {
		width: 574rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 34rpx auto 26rpx;
		padding: 0;
		.pre-p {
		}
		.date-m {
			min-width: 240rpx;
			padding: 0 28rpx 0 32rpx;
			margin: 0 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 25rpx;
			color: rgba(31, 36, 52, 0.5);
			text-align: center;
		}
		.next-p {
		}
	}
	.celiang {
		padding: 32rpx 0;
		.header,
		.hint {
			padding-left: 32rpx;
			padding-right: 32rpx;
		}
		.charts {
			width: 100%;
			height: 460rpx;
			padding: 0 10rpx;
		}
	}
	.circular {
		.add {
			width: 54rpx;
			height: 54rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(31, 36, 52, 0.1);
			border-radius: 50%;
		}
		.circular-box {
			margin-top: 70rpx;
			.t-box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				.num {
					font-weight: 700;
					font-size: 38rpx;
					color: #000000;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					white-space: nowrap;
				}
				.item-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #5a667e;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					white-space: nowrap;
				}
				.circularProgress {
					// width: 150rpx;
					margin-top: -46rpx;
					.details {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.b-box {
				border-top: 2rpx solid #eaebee;
				margin-top: -30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-top: 30rpx;
				.item {
					width: 150rpx;
				}
				.num {
					font-weight: 400;
					font-size: 22rpx;
					color: #9ba2b9;
					line-height: 50rpx;
					text-align: left;
					white-space: nowrap;
					text {
						color: #000000;
					}
				}
				.progress {
					padding: 8rpx 0;
				}
				.item-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 48rpx;
					text-align: left;
				}
			}
			.kj-box {
				width: 100%;
				height: 134rpx;
				margin: 54rpx auto 0;
				background: #f3f4f7;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.kj-item {
					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #5a667e;
						text-align: left;
					}
					.num {
						font-weight: 500;
						font-size: 32rpx;
						margin-top: 6rpx;
						text-align: left;
						white-space: nowrap;
					}
				}
			}
			.ydCharts {
				margin-top: -60rpx;
				width: 100%;
				height: 460rpx;
			}
			.sleep-box {
				.tips {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1f2434;
					margin-top: 30rpx;
					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 42rpx;
						color: #23c89e;
						margin: 0 10rpx;
					}
					.text1 {
						margin-left: 10rpx;
					}
					.text2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #1f2434;
					}
				}
			}
		}
	}
	.daixie {
		.content {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 64rpx;
			.charts {
				width: 370rpx;
				height: 370rpx;
			}
			.charts-text {
				.text-item {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(31, 36, 52, 0.8);
					text-align: left;
					margin-bottom: 28rpx;
					text {
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #1f2434;
						text-align: left;
					}
				}
			}
		}
	}
	.m-card {
		margin: 0 32rpx 0;
		padding: 32rpx;
		background: linear-gradient(180deg, #f0fbfe 0%, #fff 40%);
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333333;

		.c_tips {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 32rpx;

			.txt {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #1f2434;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.u_time {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.icon-question-circle-fill {
				font-size: 34rpx;
			}
		}

		.task,
		.unlock,
		.none {
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.status {
				margin: 48rpx 0 72rpx;
				font-weight: 500;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
			}

			.m_t {
				margin-bottom: 12rpx;
				font-weight: 500;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				text-align: left;
			}

			.intro {
				padding: 0 64rpx 64rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: left;
			}
			.unlock-btn {
				width: 258rpx;
				height: 82rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #1f2434;
				border-radius: 64rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 82rpx;
				text-align: center;
			}
			.unlock-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1f2434;
				line-height: 48rpx;
				text-align: left;
				margin-top: 38rpx;
			}
			.unlock-text2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 42rpx;
				text-align: center;
				width: 418rpx;
			}
			.unlock-text3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 42rpx;
				color: #1f2434;
				line-height: 42rpx;
				text-align: center;
				margin: 0 10rpx;
			}
			.weeks,
			.day {
				width: 100%;
				padding: 30rpx;
				border-radius: 32rpx;
				color: #1f2434;

				.d_t {
					font-size: 28rpx;
					font-weight: 500;
					font-family: PingFangSC-Medium, PingFang SC;
					text-align: left;
				}

				.tips {
					line-height: 34rpx;
					padding: 14rpx 0 38rpx;
					font-size: 26rpx;
					text-align: left;
					color: rgba(31, 36, 52, 0.5);
				}

				.options {
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 0 100rpx;
					.option {
						display: flex;
						flex-direction: column;
						align-items: center;

						.o_status {
							width: 96rpx;
							height: 96rpx;
							margin-bottom: 16rpx;
							border-radius: 50%;
							font-size: 32rpx;
							background-color: #fafafa;
							border: 2rpx solid #1f2434;
							color: #1f2434;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.checked {
							background: linear-gradient(
								180deg,
								#545454 0%,
								#1f2434 100%
							);
							border: 0;
							color: #fff;
						}

						.type {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.unlock {
			.m_t {
				margin: 48rpx 0 64rpx 0;
				padding: 0 32rpx;
			}
		}

		.task {
			.u_time {
				width: 100%;
				text-align: left;
			}

			.garage {
				width: 320rpx;
				height: 320rpx;
				margin-top: 16rpx;
				position: relative;

				.uni-ec-canvas {
					width: 100%;
					height: 100%;
				}

				.details {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -60%);
					display: flex;
					flex-direction: column;
					align-items: center;
					font-weight: 500;
					font-size: 72rpx;
					font-family: PingFangSC-Medium, PingFang SC;

					.text1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.m_t {
				padding: 0 32rpx;
				margin-bottom: 0;
			}

			.weeks {
				padding: 32rpx 32rpx 48rpx 32rpx;
				margin: 64rpx 0 0 0;

				.w_box,
				.status {
					display: flex;
					align-items: center;
					margin: 16rpx 0 48rpx 0;

					.s_i {
						display: flex;
						align-items: center;
						margin-right: 48rpx;

						.s_dot {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
						}

						.s_text {
							font-size: 24rpx;
							padding-left: 8rpx;
						}
					}
				}

				.w_box {
					margin: 0;
					padding: 0 6rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.week {
						display: flex;
						flex-direction: column;
						align-items: center;

						.w_dot {
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
						}

						.w_text {
							font-size: 20rpx;
							padding-top: 16rpx;
						}
					}
				}
			}
		}

		.more_button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #545dde;
			border-radius: 16rpx;
			color: #fff;
			font-size: 36rpx;
		}

		.garage {
			width: 320rpx;
			height: 320rpx;
			position: relative;

			.canvas {
				width: 100%;
				height: 100%;
			}

			.status-t {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				.status-count {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					font-family: PingFangSC-Medium, PingFang SC;
				}
			}
		}
	}
	.w-card {
		margin-bottom: 48rpx;
		padding: 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
		color: #666666;
		.tabs {
			width: 574rpx;
			height: 66rpx;
			margin: 24rpx auto 0;
			display: flex;
			align-items: center;
			background: #f3f4f7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.tab {
				width: 33.3%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 38rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-right: 2rpx solid #d0d0d0;
				&:last-child {
					border-right: 0;
				}
			}
			.current {
				font-weight: 600;
				font-size: 26rpx;
				color: #1f2434;
			}
		}
		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.t-l {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000;
			}

			.add {
				width: 54rpx;
				height: 54rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(31, 36, 52, 0.1);
				border-radius: 50%;
			}
		}
		.charts_w {
			height: 460rpx;
			margin-top: 10rpx;
			width: 100%;
			position: relative;

			.uni-ec-canvas {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 88;
				width: 100%;
				height: 100%;
			}
		}

		.showModal-page {
			width: 100%;
			height: 64rpx;
			padding: 0 32rpx;
			background-color: #fafafa;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.s_l {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex: 1;
				font-size: 20rpx;
				color: #666666;

				.showModal-line {
					width: 2rpx;
					height: 36rpx;
					background: #e5e5e5;
					margin: 0 24rpx;
				}

				.info_data {
					display: flex;
					align-items: center;
				}
			}

			.h_b {
				width: 80rpx;
				height: 36rpx;
				line-height: 32rpx;
				border: 2rpx solid #545dde;
				border-radius: 22rpx;
				color: #545dde;
				font-size: 18rpx;
			}
		}
	}
}
</style>
